<template>
	<jf-navigation background="#ffffff" @getHeight="getNavigationHeight">
		<template #left>
			<view class="forum_navigation">
				<image :src="userinfo.avatar || headerIcon" class="forum_navigation_header"></image>
				<view class="forum_navigation_level">
					<view>LV{{userinfo.level}}</view>
					<image src="@/static/images/common/level_icon.png"></image>
				</view>
			</view>
		</template>
		<view>{{$t('index.forum.navigation')}}</view>
		<template #right>
			<view class="forum_navigation">
				<jf-locale @fatherMethod="fatherMethod()"></jf-locale>
				<image src="@/static/images/index/search_icon.png" class="forum_navigation_search" @click="search()">
				</image>
			</view>
		</template>
	</jf-navigation>

	<view class="top-mar">
		<swiper :autoplay="true" :interval="5000" :duration="1000" circular class="forum_banner">
			<swiper-item v-for="(item,index) in data.banners" :key="index">
				<image :src="item.zh_Hant_images" mode="aspectFill" class="forum_banner_image"
					@click="navGo('/pages/index/web/index?url=' + item.zh_Hant_link)" v-if="data.code=='zh_Hant'">
				</image>
				<image :src="item.en_images" mode="aspectFill" class="forum_banner_image"
					@click="navGo('/pages/index/web/index?url=' + item.en_link)" v-else-if="data.code=='en'"></image>
				<image :src="item.ja_images" mode="aspectFill" class="forum_banner_image"
					@click="navGo('/pages/index/web/index?url=' + item.ja_link)" v-else-if="data.code=='ja'"></image>
				<image :src="item.kr_images" mode="aspectFill" class="forum_banner_image"
					@click="navGo('/pages/index/web/index?url=' + item.kr_link)" v-else-if="data.code=='kr'"></image>
				<image :src="item.image" mode="aspectFill" class="forum_banner_image"
					@click="navGo('/pages/index/web/index?url=' + item.link)" v-else></image>
			</swiper-item>
		</swiper>
		<jf-menu :list="data.menus" v-model="data.currentIndex" @change="menuChange()"></jf-menu>
	</view>
	
	<view class="juli"></view>

 
	<jf-falls :list="data.list" :loading="data.loading" :column="queryParams.pid?1:2" :loadEnd="data.loadEnd"
		:loadError="data.loadError" :total="data.total" :loadNoneText="$t('common.load.none')"
		:loadEndText="$t('common.load.notMore')" :loadErrorText="$t('common.load.error')" @load="getList()">
		<template #scope="{item}">
			<jf-forum :item="item" v-if="!queryParams.pid"></jf-forum>
			<jf-post :item="item" v-else></jf-post>
		</template>
	</jf-falls>
</template>

<script lang="ts" setup>
	import { reactive, getCurrentInstance, onMounted, computed, watch } from 'vue';
	import headerIcon from "@/static/images/common/header_icon.png"
	import { useStore } from "@/store/main"
	import { listArticle } from "@/api/article"
	import { getBanner } from '@/api/common';

	const props = withDefaults(defineProps<{
		reachBottom : boolean
	}>(), {
		reachBottom: false
	})
	const emits = defineEmits<{
		(e : 'update:reachBottom', value : boolean) : void
	}>()
	const store = useStore()
	const userinfo = computed(() => {
		return store.getUserinfo
	})
	const { proxy } = getCurrentInstance()
	const data = reactive({
		navigationHeight: 0,
		menus: [],
		currentIndex: 0,
		banners: [],
		list: [],
		total: 0,
		loading: false,
		loadEnd: false,
		loadError: false,
		code: '',
	})
	const queryParams = reactive({
		page: 1,
		limit: 10,
		pid: undefined,
		recommend: undefined,
		is_news: undefined,
		is_hot: 1,
		language: uni.getLocale()
	})

	const navGo = (url : string) : void => {
		uni.navigateTo({
			url
		})
	}
	const menuChange = () : void => {
		queryParams.pid = null
		queryParams.recommend = null
		queryParams.is_news = null
		queryParams.is_hot = null
		if (data.menus[data.currentIndex].value > 0) {
			queryParams.pid = data.menus[data.currentIndex].value
		} else if (data.menus[data.currentIndex].value === -3) {
			queryParams.recommend = 1
		} else if (data.menus[data.currentIndex].value === -2) {
			queryParams.is_news = 1
		} else if (data.menus[data.currentIndex].value === -1) {
			queryParams.is_hot = 1
		} 
		emits('update:reachBottom', false)
		getList(true)
	}
	const getNavigationHeight = (height : number) : void => {
		data.navigationHeight = height
	}
	const search = () : void => {
		uni.navigateTo({
			url: "/pages/index/search/search"
		})
	}
	const getList = (init ?: boolean) : void => {
		if (init) {
			queryParams.page = 1
			data.total = 0
			data.list = []
			data.loadEnd = false
			data.loadError = false
			data.loading = false
		}
		if (data.loadEnd || data.loading) {
			emits('update:reachBottom', false)
			return
		}
		data.loading = true
		data.loadEnd = false
		data.loadError = false
		listArticle(queryParams).then((res : any) => {
			data.total = res.data.count
			console.log("res.data.list", res.data.list)
			data.list = data.list.concat(res.data.list)
			if (queryParams.page * queryParams.limit > data.total) {
				data.loadEnd = true
			}
			queryParams.page += 1
			emits('update:reachBottom', false)
		}).catch(() => {
			data.loadError = true
			emits('update:reachBottom', false)
		}).finally(() : void => {
			data.loading = false
		})
	}

	const getLunbo = () : void => {
		data.code = uni.getLocale();
		getBanner().then((res) => {
			data.banners = res.data.list
		})
	}

	const fatherMethod = () : void => {
		data.code = uni.getLocale();
		getLunbo()
	}

	onMounted(() => {
		data.menus = [
			{ label: proxy.$t('index.forum.hot'), value: -1 },
			{ label: proxy.$t('index.forum.new'), value: -2 },
			{ label: proxy.$t('index.forum.recommend'), value: -3 },
		].concat(store.getClassifyList)
		getLunbo();
		getList(true)
	})
	watch(() => props.reachBottom, (nVal : boolean) : void => {
		if (nVal) getList()
	}, {
		deep: true
	})
</script>

<style lang="scss">
	.forum_navigation {
		display: flex;
		flex-direction: row;
		align-items: center;

		.forum_navigation_header {
			width: 72rpx;
			height: 72rpx;
			border-radius: 36rpx;
		}

		.forum_navigation_level {
			position: relative;
			margin-left: 16rpx;

			view {
				padding: 0 14rpx 0 46rpx;
				background: var(--background);
				font-weight: 500;
				color: #FFFFFF;
				line-height: 32rpx;
				font-size: 20rpx;
				border-radius: 16rpx;
			}

			image {
				position: absolute;
				left: 0;
				top: -4rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.forum_navigation_search {
			width: 48rpx;
			height: 48rpx;
			margin-left: 24rpx;
		}
	}

	.forum_banner {
		width: 686rpx;
		height: 264rpx;
		border-radius: 16rpx;
		margin: 0rpx 0 0 32rpx;
		overflow: hidden;

		.forum_banner_image {
			width: 686rpx;
			height: 264rpx;
		}
	}

	.top-mar {
		position: fixed;
		left: 0px;
		z-index: 100;
		overflow: hidden;
		background: #fff;
	}
	.juli{
		height:360rpx;
	}
</style>